{extend name="base" /}

{block name="body"}
{include file="common/header" /}
<div class="layui-card">
 {if isset($user) and $user.id==1}

<div class="layui-btn-container" style="margin-left: 50px;margin-top: 5px;">
            <form id="login_form" class="layui-form" action="{:url('fileUpload/add')}" method="post">
                        <input type="hidden" name="image" value="" autocomplete="off" placeholder="" class="layui-input">
                        <input type="hidden" name="filesize" id="filesize" value="">
  <button type="button" id="image" class="layui-btn layui-btn-danger demo-class-accept" id="" lay-on="get-vercode" lay-options="{
                          accept: 'file',
                           exts: 'zip|rar|7z|exe'
                         }"><i class="layui-icon layui-icon-upload"></i>选择文件</button>
      <div class="layui-input-inline layui-input-wrap">
        <input type="text" style="cursor:text;" id="mine" name="mine" value="" autocomplete="off" placeholder="备注说明"  class="layui-btn layui-btn-primary layui-border-red">
      </div>
  <button type="button" class="layui-btn" lay-filter="save" lay-submit="">保存上传</button>
        </form>
</div>
    {/if}
        <table id="tableList" lay-filter="tableList"></table>
<script type="text/html" id="toolbarDemo">

</script>
      <!-- 表格操作列 -->
    <script type="text/html" id="tableTBTrack">
        <a class="layui-btn layui-btn-sm ajax-download" href="{{d.url}}" tiptext="确认下载文件{{d.urls}}">下载</a>
      {if isset($user) and $user.id==1}
        <a href="{:url('fileUpload/del')}?id={{d.id}}&url={{d.url}}" class="layui-btn layui-btn-danger layui-btn-sm ajax-delete" tiptext="确认下载文件{{d.urls}}"><i class="layui-icon layui-icon-delete"></i>删除</a>
        {/if}
    </script>
</div>
{/block}
{block name="js"}
<script>
    layui.use(function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var upload = layui.upload;
        var element = layui.element;

         form.render();
  // 渲染上传文件
  upload.render({
    elem: '.demo-class-accept', // 绑定多个元素
    url: "{:url('upload/uploadFile',['model'=>'6'])}", //Change to your own upload interface //改成您自己的上传接口
    // accept: 'file', // 普通文件

    done: function (result) {
        // 上传完毕回调
        if (result.code === 1) {
            $('#image').attr('src', result.url);
            //this.item.prev('input').val(result.url);
            $('input[name="image"]').val(result.url);
            $('input[name="filesize"]').val(result.filesize);
            //$('input[name="mine"]').val(result.mine);
            layer.msg(result.msg, {icon: 1});
        } else {
            layer.msg(result.msg, {icon: 2});
        }
    }
  });
        // 渲染回访表格
        var insTb = table.render({
            elem: '#tableList',
            toolbar: '#toolbarDemo',  //开启头部工具栏，并为其绑定左侧模板
            url: "{:url('fileUpload/index_json')}",  // 请求数据路由地址
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] //自定义分页布局
                 //,curr: 5 //设定初始在第 5 页
            ,groups: 5 //只显示 1 个连续页码
            ,first: false //不显示首页
            ,last: false //不显示尾页
            ,prev: '<em>上一页</em>'
            ,next: '<em>下一页</em>'
            ,first: '<em>首页</em>' //不显示首页
            ,last: '<em>尾页</em>' //不显示尾页
            ,limit:'15'
            ,limits:['15','30','50','100','200','500']
            } ,
            lineStyle: 'height: 100px;',even:true,
            cols: [[
                  {
                    type: 'checkbox'
                }, {
                    field: 'id', 
                    title: 'ID', 
                    width: 100
                }, {
                    field: 'url', 
                    align: 'center', 
                    title: '名称', 
                    width: 150, templet: function (d) {
                      var url = d.url;
                      const filePath = d.url;
                      const fileName = filePath.split('/').pop();
                     console.log(fileName);
                        return fileName;
                    }
                }, {
                    field: 'file_size', title: '文件大小', align: 'center', width: 180, templet: function (d) {
                        return bytesToSize(d.file_size);
                    }
                }, {
                    field: 'mine', 
                    title: '备注说明', 
                    align: 'center', 
                    width: 150
                }, {
                    field: 'create_time', 
                    title: '添加时间', 
                    align: 'center', 
                    width: 200
                }, {
                    field: 'status', 
                    title: '状态', 
                    align: 'center', 
                    width: 80,
                    templet:function (d) {
                        return  d.status ? ' <i class="layui-icon layui-icon-ok-circle" style="font-size: 25px; color: #009688;"></i>' : '<i class="layui-icon layui-icon-close-fill" style="font-size: 25px; color: #FF5722;"></i>';
                    }
                }, {
                    align: 'center', 
                    toolbar: '#tableTBTrack', 
                    title: '操作', 
                    minWidth: 200
                }
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                  "code": res.code, //解析接口状态
                  "msg": res.msg, //解析提示文本
                  "count": res.data.total, //解析数据长度
                  "data": res.data.data //解析数据列表
                };
            }
        });
       
       });

function bytesToSize(bytes) {
  if (bytes === 0) return '0 B';

  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));

  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

</script>
{/block}